<?php 
    session_start();
   	include("php/conexion.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<meta name="description" content="Torneo Comercial de Basket">
		<meta name="keywords" content="torneo.basket,comercial,amateur,vector,it,vector-it,cordoba,argentina">
		<meta name="author" content="Vector-IT">
	    <title>Torneo TCB</title>
	    <link rel="shortcut icon" href="imagenes/favicon.ico" type="image/x-icon" />
	    <link rel="icon" href="imagenes/favicon.ico" type="image/x-icon" />
		<link rel="image_src" href="http://www.torneotcb.com.ar/imagenes/logo.png" />
		<link rel="stylesheet" type="text/css" href="css/tcb.css">
	    
        <meta property="og:title" content="Torneo TCB" />
		<meta property="og:url" content="http://www.torneotcb.com.ar" />
		<meta property="og:description" content="Torneo Comercial de Basket" />
		<meta property="og:image" content="http://www.torneotcb.com.ar/imagenes/logo.png" />
		
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<link rel="stylesheet" type="text/css" href="jquery/css/custom-theme/jquery-ui-1.10.3.custom.min.css" />
		<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
		<!--
		<script src="jquery/js/jquery-1.9.1.js"></script>
		<script src="jquery/js/jquery-ui-1.10.3.custom.js"></script>
		--> 
		
		<script src="js/publicos.js"></script>	
	    
	    <!-- LightBox -->
		<link rel="stylesheet" href="css/lightbox.css" media="screen"/>
		<script src="js/lightbox-2.6.min.js"></script>
		
		<script src="js/jquery.ez-bg-resize.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(document).ready(function() {
				
				var BGImageArray = ["bg.jpg","bg2.jpg","bg5.jpg","bg6.jpg","bg7.jpg","bg8.jpg"];
				var BGImage = BGImageArray[Math.floor(Math.random()*BGImageArray.length)];
	
				$("body").ezBgResize({
					img     : "imagenes/fondos/" + BGImage, // Relative path example.  You could also use an absolute url (http://...).
					opacity : 1, // Opacity. 1 = 100%.  This is optional.
					center  : true // Boolean (true or false). This is optional. Default is true.
				});
			});

			function armarPagina() {
				cargarEncabezado(function(){
					verAlbums();
				});
			}

			function cargarEncabezado(callback) {
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
    
                xmlhttp.onreadystatechange=function()
                {
                    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    	document.getElementById("divEncabezado").innerHTML = xmlhttp.responseText;
                    	callback();
                    }
                };
                xmlhttp.open("POST","encabezado.php",true);
                xmlhttp.send();
			}
		</script>
		<script type="text/javascript">
			var I, J;
			var strURL;
			
			function verAlbums() {
				document.getElementById("divTitulo").innerHTML = "Albums de fotos";
				divDatos = document.getElementById("divDatos");
				var strAux = "";
				
				I = 1;
				FB.api('/126750014062523?fields=albums', function(response) {
			        if(response.albums.data) {
			            $.each(response.albums.data,function(index,album) {
		                	if (I <= 10){
			                	if (I == 1)
				                	strAux = '<table style="width: 100%;"><tr>';
				                	
					            if ((album.name.indexOf('Timeline') == -1) && (album.name.indexOf('Profile') == -1) && (album.name.indexOf('Cover') == -1)) {
						            strAux+= '<tr><td><a href="#" class="botonTexto" onclick="verAlbumFotos(' + album.id + ', \'' + album.name + '\');"><div style="font-size: 16px;">'+album.name+'</div>';
						            strAux+= '<img src="" id="' + album.cover_photo + '" /></a>';
						            strAux+= '<img src="imagenes/comentarios.png" title="Ver Comentarios" style="cursor: pointer;" onclick="verComentarios(' + album.id + ')" /></a>';
									strAux+= '<span id="' + album.id + '">';
									if (album.comments)
										strAux+= album.comments.data.length;
									else
										strAux+= '0';
									strAux+= '</span>';
						            
						            strAux+= '</td></tr>';
				                	verFoto(album.cover_photo);
				                	I++;
					            }
		                	}
		                	else {
			                	strAux+= "</table>";
		                		divDatos.innerHTML = strAux;
		                	}
			            });
			        } else {
			            alert("Error al buscar los albums!");
			        }
			    });
			}
	
			function verFoto(idFoto) {
				FB.api('/'+idFoto, function(response) {
			        if(response) {
				        document.getElementById(idFoto).src = response.picture;
			        } else {
			            alert("Error!");
			        }
			    });
			}
	
			function verAlbumFotos(idAlbum, strNombre) {
				document.getElementById("divTitulo").innerHTML = strNombre;
				divFotos = document.getElementById("divDatos");
				
				var strAux = '<a href="#" class="botonTexto" onclick="verAlbums();">Volver</a>';
				
				FB.api('/' + idAlbum + '?fields=photos.limit(100)', function(response) {
					if (response) {
						I = 1;
						J = 1;
						strAux+= '<table>';
						
						$.each(response.photos.data, function(index, foto) {
							if (I == 1)
								strAux+= '<tr>';
								
							strAux+= '<td style="vertical-align: top;"><a href="' + foto.source + '" class="botonTexto" data-lightbox="album"><img src="' + foto.picture + '" /></a>';
							strAux+= '<br><img src="imagenes/comentarios.png" title="Ver Comentarios" style="cursor: pointer;" onclick="verComentarios(' + foto.id + ')" /></a>';
							strAux+= '<span id="' + foto.id + '">';
							if (foto.comments)
								strAux+= foto.comments.data.length;
							else
								strAux+= '0';
							strAux+= '</span></td>';

							if (I < 5) 
								I++;
							else {
								strAux+= '</tr>';
								I = 1;								
							}

							if (index == response.photos.data.length - 1) {
								strAux+= "</table>";
								strAux+= '<input type="button" class="boton" id="btnVerMas" onclick="verMas(' + J + ');" value="Ver m&aacute;s..." />';
								divFotos.innerHTML = strAux;
								strURL = response.photos.paging.next;
							}
						});
					}
					else
						alert("Error!");
				}); 
			}

			function verMas(strI) {
				document.getElementById("btnVerMas").remove();
//				var divMasFotos = document.createElement("div");
//				divMasFotos.innerHTML = '<img src="imagenes/spinner.gif" style="width: 16px; height: 16px;" />Actualizando...';
//				document.getElementById("divDatos").appendChild = divMasFotos;
				
				FB.api(strURL, function(response) {
					if (response) {
						I = 1;
						J = 1;
						var strAux = '<table>';
						
						$.each(response.data, function(index, foto) {
							if (I == 1)
								strAux+= '<tr>';
								
							strAux+= '<td style="vertical-align: top;"><a href="' + foto.source + '" class="botonTexto" data-lightbox="album"><img src="' + foto.picture + '" /></a>';
							strAux+= '<br><img src="imagenes/comentarios.png" title="Ver Comentarios" style="cursor: pointer;" onclick="verComentarios(' + foto.id + ')" /></a>';
							strAux+= '<span id="' + foto.id + '">';
							if (foto.comments)
								strAux+= foto.comments.data.length;
							else
								strAux+= '0';
							strAux+= '</span></td>';

							if (I < 5) 
								I++;
							else {
								strAux+= '</tr>';
								I = 1;								
							}

							if (index == response.data.length - 1) {
								strAux+= "</table>";
								strAux+= '<input type="button" class="boton" id="btnVerMas" onclick="verMas(' + J + ');" value="Ver m&aacute;s..." />';
								var divMasFotos = document.createElement("div");
								divMasFotos.innerHTML = strAux;
								document.getElementById("divDatos").appendChild(divMasFotos);
								strURL = response.paging.next;
							}
						});
					}
					else
						alert("Error!");
				}); 
			}
			
			function verComentarios(idItem) {
				FB.api('/'+idItem+'?fields=comments', function(response) {
			        if(response.comments) {
						var strAux = "";

						$.each(response.comments.data, function(index, comentario) {
							strAux+= '<div style="color: yellow;">De ' + comentario.from.name + '</div>';
							strAux+= '&nbsp;&nbsp;' + comentario.message;
							
					        document.getElementById(idItem).innerHTML = strAux;
						});
			        } 
				    else {
			        	document.getElementById(idItem).innerHTML = "Sin Comentarios.";
			        }
			    });
			}
		</script>
	</head>
	<body onload="armarPagina();">
		<!-- Codigo para analytics -->
		<?php include_once("php/analyticstracking.php") ?>

		<!-- Codigo para facebook -->
		<div id="fb-root"></div>
		<script>
		  window.fbAsyncInit = function() {
		    // init the FB JS SDK
		    FB.init({
		      appId      : '<?php echo $fb_appId;?>',                        // App ID from the app dashboard
		      channelUrl : '//www.torneotcb.com.ar/php/channel.html', // Channel file for x-domain comms
		      status     : true,                                 // Check Facebook Login status
		      xfbml      : true                                  // Look for social plugins on the page
		    });
		
		    // Additional initialization code such as adding Event Listeners goes here
		  };
		
		  // Load the SDK asynchronously
		  (function(d, s, id){
		     var js, fjs = d.getElementsByTagName(s)[0];
		     if (d.getElementById(id)) {return;}
		     js = d.createElement(s); js.id = id;
		     js.src = "//connect.facebook.net/es_LA/all.js";
		     fjs.parentNode.insertBefore(js, fjs);
		   }(document, 'script', 'facebook-jssdk'));
		</script>
		
<!-- Ventanas modales -->
		<div id="divFondo" class="fondo" onclick="cerrarLogin();"></div>
		
		<div id="divLogin" class="modal">
			<table style="width: 100%;" class="accesos">
				<tr>
					<td>
						Acceder al sistema
					</td>
					<td style="text-align: right;">
					<input type="button" value="X" onclick="cerrarLogin();" class="boton" />
					</td>
				</tr>
			</table>
			<div style="padding-top: 10px;">
				<form name="frmLogin" id="frmLogin" method="POST" onSubmit="return false;">
					<table>
						<tr>
							<td>
								<label for="txtUser">Usuario: </label>
							</td>
							<td>
								<input type="text" id="txtUser" required />
							</td>
						</tr>
						<tr>
							<td>
								<label for="txtPass">Contrase&ntilde;a: </label>
							</td>
							<td>
								<input type="password" id="txtPass" required />
							</td>
						</tr>
						<tr>
							<td colspan="2" style="text-align: right;">
								<div id="divLoginError" class="error"></div>
								<input type="submit" value="Aceptar" onclick="login(location.href);" class="boton"/>&nbsp;
								<input type="button" value="Cancelar" onclick="cerrarLogin();" class="boton" />
							</td>
						</tr>
					</table>
				</form>
			</div>
		</div>

		<div class="contenedor">
		    <div class="encabezado" id="divEncabezado">
		    	<img src="imagenes/logo_viejo.png" />
			</div>
	    	
	    	<div class="contenido">
	    		<div id="divTitulo" class="tituloBajo">Albums de Fotos</div>
	    		<div id="divDatos"></div>
	    	</div>
	
		    <div id="pie" class="pie">
            	<div style="float: left;">
            		Estamos en Redes Sociales
            	  	<a href="http://www.facebook.com/pages/Torneo-Comercial-De-Basquet/126750014062523" target="_blank"><img src="imagenes/facelogo.png" height="25" width="25"  /></a>
            	  	<a href="http://twitter.com/TorneoComercial" target="_blank"><img src="imagenes/twitlogo.png" height="25" width="25" /></a>
            	</div>
                <div style="float: right;">
                	<p>
                		2013 Copyright Torneo TCB.<br/>
                		Todos los derechos reservados.<br/>
                    	Powered by <a href="http://www.vector-it.com.ar" target="_blank"><img src="imagenes/vectorit.png" height="15" width="15" />Vector-IT</a>
                    </p>
				</div>
		    </div>

	    </div>
	</body>
</html>